<style scoped lang="scss">
.search-header {
  width: 100%; // 改用100%更灵活，适配不同视口宽度
  height: 12vh; // 头部总高度（包含所有内容）
  padding-top: 0.8vh; // 原0.2rem改为vh，保持与高度比例一致
  background: #161622;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box; // 确保padding包含在12vh内

  .back-btn {
    position: absolute;
    left: 1vh; // 左侧距离用vh
    top: 0.8vh; // 顶部距离与padding-top呼应
    font-size: 3vh; // 图标大小用vh
    cursor: pointer;
  }

  .search-bar {
    width: 70%; // 改用百分比，适配不同宽度
    height: 5vh; // 搜索框高度用vh
    display: flex;
    align-items: center;
    background: #2c2f3a;
    border-radius: 2.5vh; // 圆角与高度成比例（50%）
    padding: 0 2vh; // 内边距用vh
    margin-left: 15%; // 左侧距离用百分比，居中搜索框

    i {
      margin-right: 1vh; // 图标与输入框间距用vh
      color: #8b8c96;
      font-size: 2vh; // 图标大小用vh
    }

    input {
      flex: 1;
      background: transparent;
      border: none;
      color: #fff;
      outline: none;
      font-size: 2vh; // 输入文字大小用vh
    }
  }

  .search-tabs {
    display: flex;
    justify-content: center;
    margin-top: 1vh; // 与搜索框的间距用vh

    .tab-item {
      width: 40%;
      text-align: center;
      padding: 0.5vh 0;
      cursor: pointer;
      color: #8b8c96;
      font-size: 2.5vh;
    }

    .tab-item.active {
      color: #fff;
      border-bottom: 0.3vh solid #face15;
    }
  }
}

// 占位盒子高度必须与头部完全一致（12vh），否则下方内容会偏移
.placeholder-box {
  width: 100%;
  height: 12vh; // 与.search-header的height一致
}
</style>
<template>
  <div class="searchBox">
    <div class="search-header">
      <!-- 返回按钮 -->
      <div class="back-btn" @click="handleBack">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <!-- 搜索框 -->
      <div class="search-bar">
        <i class="iconfont icon-sousuo"></i>
        <!-- 回车事件变为值改变 -->
        <input type="text" :placeholder="`输入关键字进行搜索（${placeholder}）`" v-model="searchKey" @input="handleSearch">
      </div>
      <!-- 标签切换 -->
      <div class="search-tabs">
        <div class="tab-item" :class="{ active: activeTab === 'video' }" @click="switchTab('video')">
          视频
        </div>
        <div class="tab-item" :class="{ active: activeTab === 'user' }" @click="switchTab('user')">
          用户
        </div>
      </div>
    </div>
    <!-- 占位盒子 -->
    <div class="placeholder-box">

    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { debounce } from '@/utils/tool.js';

// 接收父组件的配置：默认激活标签、搜索提示
const props = defineProps({
  defaultTab: { type: String, default: 'video' }, // 默认激活的标签：video/user
  placeholder: { type: String, default: '视频描述' } // 搜索框提示文字
});

// 对外暴露事件：返回、搜索、标签切换
const emit = defineEmits(['back', 'search', 'tab-change']);

const activeTab = ref(props.defaultTab);
const searchKey = ref('');

// 返回操作
function handleBack() {
  emit('back');
}

// 搜索操作
const handleSearch = debounce(() => {
  emit('search', { key: searchKey.value, tab: activeTab.value });
});

// 标签切换
function switchTab(tab) {
  activeTab.value = tab;
  if (tab !== props.defaultTab) {
    emit('tab-change', tab);
  }
}
</script>